<template>
    <div class="home">
        <div class="app-container">
            <!-- 页面内容区域的占位符 -->
            <div class="home-page">
                <div class="top-tabs">
                    <span v-for="tab in tabs" :key="tab" :class="{ active: currentTab === tab }"
                        @click="currentTab = tab">{{ tab }}</span>
                </div>
            </div>
            <!-- 宫格功能区 -->
            <div class="feature-card">
                <div class="feature-grid">
                    <div class="feature-item" v-for="item in features" :key="item.text">
                        <img :src="item.icon" class="feature-icon" />
                        <div class="feature-text">{{ item.text }}</div>
                    </div>
                </div>
            </div>
            <!-- 英语专项突破 -->
            <div class="section-title">英语专项突破</div>
            <div class="special-list">
                <div class="special-card" v-for="item in specials" :key="item.title">
                    <img :src="item.img" class="special-img" />
                    <div class="special-label" :style="{ background: item.labelBg }">{{ item.label }}</div>
                    <div class="special-title">{{ item.title }}</div>
                    <div class="special-price">￥{{ item.price }}</div>
                </div>
            </div>
            <div class="content-area">
                <!-- 这里是页面内容 -->
            </div>
            <!-- 顶部导航栏 -->
            <tabBar :isshow="1"></tabBar>
            <!-- 底部导航栏 -->

        </div>
        <div>User Profile</div>
        <tabbar :ishow="1"></tabbar>
    </div>
</template>
<script>
import tabbar from '@/components/tabbar.vue';
export default {
    data() {

    },
    components: {
        tabbar
    },
}
const features = [
  { icon: '/icon-cet.png', text: '大学考试' },
  { icon: '/icon-lecture.png', text: '四六级课' },
  { icon: '/icon-plane.png', text: '出国英语' },
  { icon: '/icon-coffee.png', text: '实用英语' },
  { icon: '/icon-lswr.png', text: '听说读写' },
  { icon: '/icon-gao.png', text: '高中英语' },
  { icon: '/icon-new.png', text: '语法基础' },
  { icon: '/icon-gao.png', text: '初中英语' },
  { icon: '/icon-calendar.png', text: '口语课' },
  { icon: '/icon-chart.png', text: '小讲堂' }
]
const specials = [
  {
    img: '/special-listen.png',
    label: '听力·趣味磨耳',
    labelBg: 'linear-gradient(90deg, #ffb84d 0%, #ffe7b2 100%)',
    title: '听力4天体验营',
    price: 6
  },
  {
    img: '/special-read.png',
    label: '阅读·外刊精读',
    labelBg: 'linear-gradient(90deg, #4dd0ff 0%, #b2f0ff 100%)',
    title: '外刊精读训练营',
    price: 6
  },
  {
    img: '/special-listen.png',
    label: '口语·外教实战',
    labelBg: 'linear-gradient(90deg, #ff4d6d 0%, #ffb2c3 100%)',
    title: '番茄口语',
    price: 6
  }
]// 当前激活的标签页
</script>
<style>
/* 应用容器 - 设置正确的页面大小 */
.app-container {
    max-width: 100%;
    width: 100%;

    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.home-page {
    padding-left: 40px;
    font-size: 18px;

}

.top-tabs span {
    margin-right: 32px;
    /* 你可以根据实际需要调整间距大小 */
    color: #bfc1bf;
    cursor: pointer;
    position: relative;
    padding-bottom: 6px;
    transition: color 0.2s;
}

.top-tabs .active {
    color: #222;
}

/*功能区宫格*/
.feature-card {
    background: #fff;
    border-radius: 18px;
    margin: 18px 12px 0 12px;
    padding: 18px 0 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px 0;
    justify-items: center;
}

.feature-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    /* 保证图片不变形，完整显示 */
    margin-bottom: 5px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.feature-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
}

.feature-text {
    font-size: 15px;
    color: #6d6e73;
    margin-top: 2px;
}

/* 内容区域 */
.content-area {
    width: 100%;
    height: calc(100vh - 60px);
    /* 减去导航栏的高度 */
    overflow-y: auto;
}

/* 底部导航栏 */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    height: 60px;
    border-top: 1px solid #eee;
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.nav-icon {
    width: 24px;
    height: 24px;
    color: #888;
}

.nav-text {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.active .nav-icon,
.active .nav-text {
    color: #333;
}

.nav-badge {
    position: absolute;
    top: 8px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff4a4a;
}
</style>